import React from 'react';
import {  Button,Input, Select,Divider } from 'antd';
import './index.css'
import { connect } from 'react-redux'
import {withRouter } from 'react-router-dom'
import {boatSeach} from '../../redux/findaBoat/findaBoat'
const Search = Input.Search;
const Option = Select.Option;

@withRouter
@connect(
    state => state,
    { boatSeach }
)
export default class SearchsList extends React.Component{
    constructor(){
        super();
        this.state = {
            shipName:'',
            dunWei:'',
            huoZhong:'',
            chuFaDi:"",
            values:'1',
            isShow:false
        }
    }
    componentDidMount(){
        this.setState({
            isShow:false
        })
    }
    onDropdownVisibleChange(){
        this.setState({
            isShow:false
        })
    }
    handleChange(value){
            
            this.props.bortValue(value)
    }
    bortSearch(){
        let bort = document.getElementById('bort').value
        this.setState({
            shipName:bort,
            isShow:true
        },()=>{
            this.props.boatSeach(this.state)
        })
    }
    render() {
       
        let shipList = this.props.findLists.shipList
        console.log(shipList)
        return (
        <div>
            <div className='searchFind'> 
                <div className="selects">
                    <Select defaultValue="1" size="large" onDropdownVisibleChange={this.onDropdownVisibleChange.bind(this)} style={{ width: 80,height:'50px', }} onChange={this.handleChange.bind(this)}>
                        <Option value="1">找船</Option>
                        <Option value="2">筛选</Option>
                    </Select>  
                </div>
                <div className="searchs">
                    <Search
                        id='bort'
                        style={{width:'300px',BorderRadiusBottomleft:'0'}}
                        placeholder="请输入船名"
                        enterButton="找船"
                        size="large"
                        onSearch={this.bortSearch.bind(this)}
                        />
                </div>
                <div className="archives" style = {{display:this.state.isShow ? 'block':'none'}}>
                    <div style = {{height:'50px',lineHeight:'40px'}}>
                        <div style = {{marginLeft:'10px'}}>船舶档案</div>
                        <Divider />
                    </div>
                    <div style = {{marginLeft:'10px',paddingBottom:'20px'}}>
                       {
                        !shipList ?'':
                           shipList.map((item,index) =>
                              {
                               return<div key={index}>
                                <div style={{paddingTop:'5px'}}>
                                    <span>船名：</span>
                                    <span>{item.shipName}</span>
                                </div>
                                <div style={{paddingTop:'5px'}}>
                                    <span>船主：</span>
                                    <span>{item.shipOwnerName}</span>
                                </div>
                                <div style={{paddingTop:'5px'}}>
                                    <span>电话：</span>
                                    <span><Button type="primary" size="small">立即联系</Button></span>
                                </div>
                                <div style={{paddingTop:'5px'}}>
                                    <span>载货量：</span>
                                    <span>{item.tonnage}</span>
                                </div>
                                <div style={{paddingTop:'5px'}}>
                                    <span>参数：</span>
                                    <span>{item.param}</span>
                                </div>
                                </div>
                            }  
                        )
                       }
                    </div>
                    <Divider />
                    <div style = {{paddingTop:'10px',marginLeft:'10px',}}>
                    {
                        !shipList ?'':
                        shipList.map((item,index) =>
                        {
                            return<div key={index}>
                        <div style={{paddingTop:'5px'}}>
                            <span>经度：</span>
                            <span>{item.lon}</span>
                        </div>
                        <div style={{paddingTop:'5px'}}>
                            <span>纬度：</span>
                            <span>{item.lat}</span>
                        </div>
                        <div style={{paddingTop:'5px'}}>
                            <span>航迹向：</span>
                            <span>{item.track}</span>
                        </div>
                        <div style={{paddingTop:'5px'}}>
                            <span>航行状态：</span>
                            <span>{item.shipState}</span>
                        </div>
                        <div style={{paddingTop:'5px'}}>
                            <span>目的地：</span>
                            <span>{item.dest}</span>
                        </div>
                        <div style={{paddingTop:'5px'}}>
                            <span>预计到港时间：</span>
                            <span>{item.etaStd}</span>
                        </div>
                        <div style={{paddingTop:'5px'}}>
                            <span>数据更新时间：</span>
                            <span>{item.lastTime}</span>
                        </div>
                        </div>
                    }  
                        )
                       }
                    </div>
                </div>
            </div>            
        </div>
    )
    }
}